import React, { useEffect } from "react";
import { ConfigProvider, Popover, message } from "antd";
import {
  ExplainOutlined,
  FileOutlined,
  CopyOutlined,
} from "@/components/Icons";
import { useTranslation } from "react-i18next";
import "./index.less";
import { copyText } from "@/utils/common";
import HoverBolck from "@/components/HoverBolck";

interface IProps {
  data: any;
  rsourceData: {
    file_id: string;
    file_name: string;
    page_content: string;
  };
  onRender?: (isForce?: boolean) => void;
}

const ContentSource: React.FC<IProps> = ({ data, rsourceData, onRender }) => {
  const { t } = useTranslation();
  const onCopyText = () => {
    copyText(rsourceData.page_content).then(() => {
      message.success("复制成功");
    });
  };
  useEffect(() => {
    onRender && onRender(true);
  }, []);
  return (
    <Popover
      overlayClassName="chat-content-source-popver"
      content={
        rsourceData ? (
          <div className="source-popver-content">
            <div className="title-area">
              <div className="title-area-l">
                <FileOutlined></FileOutlined>
                <div className="title">{rsourceData.file_name}</div>
              </div>
              <HoverBolck
                overlay={"复制结果"}
                onClick={() => {
                  onCopyText();
                }}
              >
                <CopyOutlined></CopyOutlined>
              </HoverBolck>
            </div>
            <div className="content-area">{rsourceData.page_content}</div>
          </div>
        ) : null
      }
      trigger="click"
    >
      <div className="chat-content-source">
        {/* {data.id ? parseInt(data.id) + 1 : 1} */}
        <ExplainOutlined></ExplainOutlined>
      </div>
    </Popover>
  );
};

export default ContentSource;
